<template>
	<view>
		<view class="top">
			<view class="top-status">
				<i class="iconfont iconcezibeifen"></i>物流跟踪
			</view>
		</view>
		<view class="cont">
			<view><text>物流状态：</text>派送中</view>
			<view><text>承运公司：</text>阳间快递</view>
			<view><text>运单号：</text>微信支付</view>
		</view>
		<view class="listCont">
			<view class="title">物流跟踪</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="itemIcon"></view>
					<view class="itemCont">
						<view class="itemCont-title">{{item.content}}</view>
						<view class="itemCont-time">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					content: '快件已到达珠海，快递员正在派送电话12345678911请保持电话通畅',
					time: '2021-2-20 17:48.00'
				}, {
					content: '派件已签收',
					time: '2021-2-219 17:48.00'
				}, {
					content: '正在派件，派件员电话：12345678911',
					time: '2021-2-18 17:48.00'
				}, {
					content: '快件在珠海斗门集散中心，准备送往下一站香洲区',
					time: '2021-2-17 17:48.00'
				}, {
					content: '已收件',
					time: '2021-2-16 17:48.00'
				},{
					content: '快件已到达珠海，快递员正在派送电话12345678911请保持电话通畅',
					time: '2021-2-20 17:48.00'
				}, {
					content: '派件已签收',
					time: '2021-2-219 17:48.00'
				}, {
					content: '正在派件，派件员电话：12345678911',
					time: '2021-2-18 17:48.00'
				}, {
					content: '快件在珠海斗门集散中心，准备送往下一站香洲区',
					time: '2021-2-17 17:48.00'
				}, {
					content: '已收件',
					time: '2021-2-16 17:48.00'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}

	.top {
		width: 100%;
		height: 200upx;
		background: #47B848;
	}

	.top-status {
		color: #FFFFFF;
		font-size: 32upx;
		padding-top: 56upx;

		i {
			margin: 0 30upx;
			font-size: 40upx;
		}
	}

	.cont {
		padding: 30upx 20upx;
		margin: -30upx auto 20upx;
		width: calc(100% - 120upx);
		background: #FFFFFF;
		border-radius: 10upx 10upx 0px 0px;

		view {
			color: #999999;
			margin-bottom: 20upx;

			text {
				color: #333333;
			}
		}

		view:first-child {
			color: #47B848;
		}
	}

	.listCont {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 120upx;

		.title {
			color: #333333;
			font-size: 32upx;
			height: 88upx;
			line-height: 88upx;
			padding: 0 30upx;
			width: calc(100% - 60upx);
			margin-bottom: 40upx;
			border-bottom: 2upx solid #E7E7E7;
		}
	}

	.list {
		padding: 0 30upx;
		width: calc(100% - 60upx);
		position: relative;

		.item {
			width: 100%;
			display: flex;
			padding-bottom: 50upx;

			.itemIcon {
				width: 20upx;
				height: 20upx;
				background: #C0C4CC;
				border-radius: 50%;
				white-space: nowrap;
				z-index: 9;
			}

			.itemCont {
				width: calc(100% - 40upx);
				padding-left: 20upx;
				margin-top: -10px;

				.itemCont-title {
					color: #999999;
				}

				.itemCont-time {
					color: #C0C4CC;
				}
			}
		}

		.item:before {
			content: '';
			position: absolute;
			left: 40upx;
			top: 0;
			z-index: 1;
			width: 2upx;
			height: 100%;
			background-color: #C0C4CC;
		}

		.item:first-child {
			color: #47B848;

			.itemIcon {
				background: #47B848;
			}

			.itemCont-title {
				color: #47B848;
			}
		}

		.item:last-child {
			padding: 0;
			width: calc(100% - 60upx);
			position: absolute;
		}

		.item:last-child:before {
			opacity: 0;
		}
	}
</style>
